<template>
  <div style="padding:0px 8px">
    <el-card class="configContainer">
      <div style="display: flex;flex-direction: row;align-items: center">
        <div style="margin: 8px">
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="年级">
              <el-select @change="changeYear" v-model="searchForm.year" placeholder="输入年级进行检索">
                  <el-option label="七年级" :value="1"/>
                  <el-option label="八年级" :value="2"/>
                  <el-option label="九年级" :value="3"/>
              </el-select>
            </el-form-item>

            <el-form-item label="班级">
              <el-select  v-model="searchForm.classId" placeholder="输入班级进行检索">
                <el-option v-for="item in classList" :key="item.id" :label="item.className" :value="item.id"/>
              </el-select>
            </el-form-item>

<!--            <el-form-item label="学期">-->
<!--              <el-select  v-model="searchForm.semester" placeholder="输入学期进行检索">-->
<!--                <el-option v-for="item in semesterList" :key="item.value" :label="item.text" :value="item.value"/>-->
<!--              </el-select>-->
<!--            </el-form-item>-->

            <el-form-item label="学年">
              <el-select v-model="searchForm.schoolYear" placeholder="输入学年进行检索">
                <el-option label="第一学年" :value="1"/>
                <el-option label="第二学年" :value="2"/>
                <el-option label="第三学年" :value="3"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :icon="Search" @click="search">
                <el-icon>
                  <Search/>
                </el-icon>
                搜索
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="space"/>
      </div>

      <div style="background: rgba(255,165,0,0.29);padding: 8px;border-radius: 8px">
        <div
            style="height: 116px;background: rgba(255,165,0,0.77);border-radius: 8px;display: flex;flex-direction: row;justify-content: space-between">
          <div
              style="display: flex;flex-direction: column;padding: 16px 32px;color:white;justify-content: space-between">
            <span style="font-weight: bolder;font-size: 20px">
              {{classMsg.grade+"级-"+classMsg.className}}
            </span>


            <div style="display: flex;flex-direction: row;align-items: flex-end;height: 40px">
              <img style="width: 20px;" src="/src/assets/boy.png">
              <img style="width: 20px;" src="/src/assets/girl.png">
              <span>
                学生总数
              </span>
              <span style="font-size: 32px;font-weight: bolder;margin-left:8px">
                {{ numOfBoy + numOfGirl }}
              </span>
              <span>
                人
              </span>


              <img style="width: 20px;margin-left: 32px" src="/src/assets/boy.png">
              <span>
                男生
              </span>
              <span style="font-size: 32px;font-weight: bolder;margin-left:8px">
                 {{ numOfBoy }}
              </span>
              <span>
                人
              </span>

              <img style="width: 20px;margin-left: 32px" src="/src/assets/girl.png">
              <span>
                女生
              </span>
              <span style="font-size: 32px;font-weight: bolder;margin-left:8px">
                 {{ numOfGirl }}
              </span>
              <span>
                人
              </span>
            </div>
          </div>
        </div>
      </div>

      <el-row>
        <el-col :span="8">
          <div class="grid-content ep-bg-purple"/>
          <div style="height: 240px;display: flex;flex-direction: column;padding:8px 32px;box-sizing: border-box">
            <div style="display: flex;flex-direction: row;align-items: center;height: 40px">
              <el-icon color="orange" style="margin-right: 8px">
                <UserFilled/>
              </el-icon>
              测试人数
              <div class="space"></div>
              <span style="font-size: 28px;font-weight: bolder">
                {{numOfBoyTest + numOfGirlTest }}
              </span>
              <span>
                人
              </span>
            </div>

            <div style="flex: 1;position: relative">
              <qiun-vue-ucharts
                  style="position: absolute"
                  type="arcbar"
                  :opts="opts"
                  :chartData="chartData"
              />
              <div style="background: #00ae10;color: white;height: 60px;width: 60px;position: absolute;border-radius: 50%;left: calc(50% - 30px);top: calc(50% - 30px); display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: 24px">
                {{ parseInt(((numOfBoyTest + numOfGirlTest) /  (numOfBoy + numOfGirl)) * 100)   }}%
              </div>
            </div>

            <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-around">
              <div>
                <img style="width: 20px;" src="/src/assets/boy.png">
                <span>
              </span>
                <span style="font-size: 32px;font-weight: bolder">
                 {{numOfBoyTest}}
              </span>
                <span>
                人
              </span>
              </div>

              <div>

                <img style="width: 20px;" src="/src/assets/girl.png">
                <span>
              </span>
                <span style="font-size: 32px;font-weight: bolder">
                 {{numOfGirlTest }}
              </span>
                <span>
                人
              </span>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="grid-content ep-bg-purple"/>
          <div style="height: 240px;display: flex;flex-direction: column;padding:8px 32px;box-sizing: border-box">
            <div style="display: flex;flex-direction: row;align-items: center;height: 40px">
              <el-icon color="orange" style="margin-right: 8px">
                <UserFilled/>
              </el-icon>
              合格人数
              <div class="space"></div>
              <span style="font-size: 28px;font-weight: bolder">
                {{ numOfYxScore + numOfLhScore + numOfHgScore }}
              </span>
              <span>
                人
              </span>
            </div>

            <div style="flex: 1;position: relative">
              <div id="hegeScoreChart" style="width: 100%;height:100%;"></div>
            </div>


            <div
                style="display: flex;flex-direction: row;align-items: center;justify-content: space-around;height: 40px">
              <div style="width: 10px;height:10px;background: #ff497d;border-radius: 50%"></div>
              优秀
              <div style="width: 10px;height:10px;background: #4c99f6;border-radius: 50%"></div>
              良好
              <div style="width: 10px;height:10px;background: #49ff5b;border-radius: 50%"></div>
              合格
              <div style="width: 10px;height:10px;background: #f9ff49;border-radius: 50%"></div>
              不合格
            </div>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="grid-content ep-bg-purple"/>
          <div style="height: 240px;display: flex;flex-direction: column;padding:8px 32px;box-sizing: border-box">
            <div style="display: flex;flex-direction: row;align-items: center;height: 40px">
              <el-icon color="orange" style="margin-right: 8px">
                <UserFilled/>
              </el-icon>
              男女成绩分布
              <div class="space"></div>

            </div>

            <qiun-vue-ucharts
                type="column"
                :opts="opts3"
                :chartData="chartData3"
            />


            <div
                style="display: flex;flex-direction: row;align-items: center;justify-content: space-around;height: 40px">
              <div style="width: 10px;height:10px;background: #ff497d;border-radius: 50%"></div>
              优秀
              <div style="width: 10px;height:10px;background: #4c99f6;border-radius: 50%"></div>
              良好
              <div style="width: 10px;height:10px;background: #49ff5b;border-radius: 50%"></div>
              合格
              <div style="width: 10px;height:10px;background: #f9ff49;border-radius: 50%"></div>
              不合格
            </div>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="grid-content ep-bg-purple"/>
          <div style="height: 240px;display: flex;flex-direction: column;padding:8px 32px;box-sizing: border-box">
            <div style="display: flex;flex-direction: row;align-items: center;height: 40px">
              <el-icon color="orange" style="margin-right: 8px">
                <UserFilled/>
              </el-icon>
              班级平均分
              <div class="space"></div>

            </div>

            <div style="flex: 1;position: relative">
              <div id="avgScoreChart" style="width: 100%;height:100%;"></div>
            </div>

            <div
                style="display: flex;flex-direction: row;align-items: center;justify-content: space-around;height: 40px">
              <div style="width: 10px;height:10px;background: #ff497d;border-radius: 50%"></div>
              优秀
              <div style="width: 10px;height:10px;background: #4c99f6;border-radius: 50%"></div>
              良好
              <div style="width: 10px;height:10px;background: #49ff5b;border-radius: 50%"></div>
              合格
              <div style="width: 10px;height:10px;background: #f9ff49;border-radius: 50%"></div>
              不合格
            </div>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="grid-content ep-bg-purple"/>
          <div style="height: 240px;display: flex;flex-direction: column;padding:8px 32px;box-sizing: border-box">
            <div style="display: flex;flex-direction: row;align-items: center;height: 40px">
              <el-icon color="orange" style="margin-right: 8px">
                <UserFilled/>
              </el-icon>
              男生成绩TOP3
              <div class="space"></div>

            </div>

            <div style="flex: 1;justify-content: space-around;display: flex;flex-direction: column">
              <div  v-if="firstBoyStudent != null" style="display: flex;flex-direction: row;justify-content: space-around;align-items: center">
                <div
                    style="font-weight: bolder;color: white;height: 20px;width: 20px;background: orange;border-radius: 50%;display: flex;flex-direction: row;justify-content: center;align-items: center">
                  1
                </div>
                <el-image style="width: 40px; height: 40px"
                          src="/src/assets/boy.png" fit="cover">
                </el-image>
                <span>{{ firstBoyStudent.name }}</span>
                <div style="width: 12px;"/>
                <span style="font-size: 24px;font-weight: bolder">{{ firstBoyStudentScore }}</span>
                <span>分</span>
              </div>
              <div v-else>

              </div>

              <div v-if="secondBoyStudent != null" style="display: flex;flex-direction: row;justify-content: space-around;align-items: center">
                <div
                    style="font-weight: bolder;color: white;height: 20px;width: 20px;background: orange;border-radius: 50%;display: flex;flex-direction: row;justify-content: center;align-items: center">
                  2
                </div>
                <el-image style="width: 40px; height: 40px"
                          src="/src/assets/boy.png" fit="cover">
                </el-image>
                <span>{{ secondBoyStudent.name }}</span>
                <div style="width: 12px;"/>
                <span style="font-size: 24px;font-weight: bolder">{{ secondBoyStudentScore }}</span>
                <span>分</span>
              </div>
              <div v-else>

              </div>

              <div v-if="thirdBoyStudent != null" style="display: flex;flex-direction: row;justify-content: space-around;align-items: center">
                <div
                    style="font-weight: bolder;color: white;height: 20px;width: 20px;background: orange;border-radius: 50%;display: flex;flex-direction: row;justify-content: center;align-items: center">
                  3
                </div>
                <el-image style="width: 40px; height: 40px"
                          src="/src/assets/boy.png" fit="cover">
                </el-image>
                <span>{{ thirdBoyStudent.name }}</span>
                <div style="width: 12px;"/>
                <span style="font-size: 24px;font-weight: bolder">{{ thirdBoyStudentScore }}</span>
                <span>分</span>
              </div>
              <div v-else>

              </div>
            </div>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="grid-content ep-bg-purple"/>
          <div style="height: 240px;display: flex;flex-direction: column;padding:8px 32px;box-sizing: border-box">
            <div style="display: flex;flex-direction: row;align-items: center;height: 40px">
              <el-icon color="orange" style="margin-right: 8px">
                <UserFilled/>
              </el-icon>
              女生成绩TOP3
              <div class="space"></div>

            </div>

            <div style="flex: 1;justify-content: space-around;display: flex;flex-direction: column">
              <div  v-if="firstGirlStudent != null" style="display: flex;flex-direction: row;justify-content: space-around;align-items: center">
                <div
                    style="font-weight: bolder;color: white;height: 20px;width: 20px;background: orange;border-radius: 50%;display: flex;flex-direction: row;justify-content: center;align-items: center">
                  1
                </div>
                <el-image style="width: 40px; height: 40px"
                          src="/src/assets/girl.png" fit="cover">
                </el-image>
                <span>{{ firstGirlStudent.name }}</span>
                <div style="width: 12px;"/>
                <span style="font-size: 24px;font-weight: bolder">{{ firstGirlStudentScore }}</span>
                <span>分</span>
              </div>
              <div v-else>

              </div>

              <div v-if="secondGirlStudent != null" style="display: flex;flex-direction: row;justify-content: space-around;align-items: center">
                <div
                    style="font-weight: bolder;color: white;height: 20px;width: 20px;background: orange;border-radius: 50%;display: flex;flex-direction: row;justify-content: center;align-items: center">
                  2
                </div>
                <el-image style="width: 40px; height: 40px"
                          src="/src/assets/girl.png" fit="cover">
                </el-image>
                <span>{{ secondGirlStudent.name }}</span>
                <div style="width: 12px;"/>
                <span style="font-size: 24px;font-weight: bolder">{{ secondGirlStudentScore }}</span>
                <span>分</span>
              </div>
              <div v-else>

              </div>

              <div v-if="thirdGirlStudent != null" style="display: flex;flex-direction: row;justify-content: space-around;align-items: center">
                <div
                    style="font-weight: bolder;color: white;height: 20px;width: 20px;background: orange;border-radius: 50%;display: flex;flex-direction: row;justify-content: center;align-items: center">
                  3
                </div>
                <el-image style="width: 40px; height: 40px"
                          src="/src/assets/girl.png" fit="cover">
                </el-image>

                <span>{{ thirdGirlStudent.name }}</span>
                <div style="width: 12px;"/>
                <span style="font-size: 24px;font-weight: bolder">{{ thirdGirlStudentScore }}</span>
                <span>分</span>
              </div>
              <div v-else>

              </div>
            </div>
          </div>
        </el-col>

        <el-col :span="24">
          <div class="grid-content ep-bg-purple"/>
          <div style="height: 280px;display: flex;flex-direction: column;padding:8px 32px;box-sizing: border-box">
            <div style="display: flex;flex-direction: row;align-items: center;height: 40px">
              <el-icon color="orange" style="margin-right: 8px">
                <UserFilled/>
              </el-icon>
              科目平均成绩
              <div class="space"></div>

            </div>

            <qiun-vue-ucharts
                type="line"
                :opts="opts5"
                :chartData="chartData5"
            />
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
  <CompanyText/>
</template>

<script>
import CompanyText from "../../../components/CompanyText.vue";
import qiunVueUcharts from '@qiun/vue-ucharts'
import * as echarts from 'echarts';


export default {
  name: "ClassOverviewPage",
  components: {
    CompanyText,
    qiunVueUcharts
  },
  data() {
    const semesterList = [
      {
        "text": "当前学期",
        "value": null
      },
      {
        "text": "七年级上期",
        "value": 1
      },
      {
        "text": "七年级下期",
        "value": 2
      },
      {
        "text": "八年级上期",
        "value": 3
      },
      {
        "text": "八年级下期",
        "value": 4
      },
      {
        "text": "九年级上期",
        "value": 5
      },
      {
        "text": "九年级下期",
        "value": 6
      },
    ];
    return {
      classList:[],

      searchForm:{},
      selectGrade : 1,
      numOfBoyTest:null,
      numOfGirlTest:null,
      numOfYxScore:null,
      numOfLhScore:null,
      numOfHgScore:null,
      numOfBhgScore:null,
      yearAndClass: {},
      selectYear: {},
      selectClass: {},
      option1: [],
      classId: null,
      semesterList,
      selectSemester: {},
      chartData: {},
      firstBoyStudent: {},
      firstBoyStudentScore : {},
      secondBoyStudent : {},
      secondBoyStudentScore: {},
      thirdBoyStudent: {},
      thirdBoyStudentScore : {},
      firstGirlStudent : {},
      firstGirlStudentScore: {},
      secondGirlStudent: {},
      secondGirlStudentScore: {},
      thirdGirlStudent : {},
      thirdGirlStudentScore: {},

      //您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: ["#ff497d", "#4c99f6", "#49ff5b", "#f9ff49"],
        padding: 8,
        title: {
          show:false,
          name: this.numOfBoyTest,
          fontSize: 20,
          color: "#7cb5ec"
        },
        subtitle: {
          name: this.numOfBoyTest ,
        },
        extra: {
          arcbar: {
            type: "circle",
            width: 12,
            backgroundColor: "#E9E9E9",
            startAngle: 1.5,
            endAngle: 0.25,
            gap: 2
          }
        }
      },

      chartData3: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['funnel'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts3: {
        color: ["#ff497d", "#4c99f6", "#49ff5b", "#f9ff49"],
        padding: [15, 15, 0, 5],
        enableScroll: false,
        legend: {
          show: false
        },
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          data: [
            {
              min: 0
            }
          ]
        },
        extra: {
          markLine: {
            dashLength: 1
          },
          column: {
            type: "stack",
            width: 30,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
            labelPosition: "center"
          }
        }
      },

      chartData4: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['gauge'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts4: {
        color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
        padding: undefined,
        title: {
          name: "66Km/H",
          fontSize: 25,
          color: "#2fc25b",
          offsetY: 0
        },
        subtitle: {
          name: "实时速度",
          fontSize: 15,
          color: "#1890ff",
          offsetY: 0
        },
        extra: {
          gauge: {
            type: "progress",
            width: 20,
            labelColor: "#666666",
            startAngle: 0.75,
            endAngle: 0.25,
            startNumber: 0,
            endNumber: 100,
            labelFormat: "",
            splitLine: {
              fixRadius: -10,
              splitNumber: 10,
              width: 15,
              color: "#FFFFFF",
              childNumber: 5,
              childWidth: 12
            },
            pointer: {
              width: 24,
              color: "auto"
            }
          }
        }
      },

      chartData5: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts5: {
        color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
        padding: [15, 10, 0, 15],
        dataLabel: false,
        dataPointShape: false,
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          data: [
            {
              min: 0,
              max: 6
            }
          ]
        },
        extra: {
          line: {
            type: "curve",
            width: 2,
            activeType: "hollow",
            linearType: "custom",
            onShadow: true,
            animation: "horizontal"
          }
        }
      },

      exampleChart: null,
      avgScoreChart: null,
      hegeScoreChart: null,

      numOfBoy: null,
      numOfGirl: null,
      classMsg:{
        className:"3年2班",
        grade:"2018"
      },
    }
  },
  mounted() {
    let that = this;
    window.onresize = () => {
      that.hegeScoreChart.resize();
      that.avgScoreChart.resize();
    }
  },
  methods: {
    getChartData() {
      let that = this;
      this.$http.post('/score/getClassOverView', that.searchForm
      ).then(function (res) {
        console.log(res)
        that.numOfBoy = res.data.numOfBoy;
        that.numOfGirl = res.data.numOfGirl;
        that.numOfBoyTest = res.data.numOfBoyTest;
        that.numOfGirlTest = res.data.numOfGirlTest;

        that.numOfYxScore = res.data.numOfYxScore;
        that.numOfLhScore = res.data.numOfLhScore;
        that.numOfHgScore = res.data.numOfHgScore;
        that.numOfBhgScore = res.data.numOfBhgScore;
        that.classMsg = res.data.classMsg;
        console.info(that.classMsg)
        let res2 = {
          series: [
            {
              name: "12",
              color: "#2fc25b",
              data: (that.numOfBoyTest + that.numOfGirlTest)/ (that.numOfBoy + that.numOfGirl)
            }
          ]
        };


        that.chartData = JSON.parse(JSON.stringify(res2));

        that.hegeScoreChart = echarts.init(document.getElementById('hegeScoreChart'));
        let option2 = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            show: false,
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['60%', '90%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {value: res.data.numOfYxScore, name: '优秀'},
                {value: res.data.numOfLhScore, name: '良好'},
                {value: res.data.numOfHgScore, name: '合格'},
                {value: res.data.numOfBhgScore, name: '不合格'},
              ]
            }
          ]
        };
        option2 && that.hegeScoreChart.setOption(option2);

        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res3 = {
          categories: ["男生", "女生"],
          series: [
            {
              name: "不合格",
              textColor: "#FFFFFF",
              data: [res.data.numOfBoyBhgScore, res.data.numOfBhgScore - res.data.numOfBoyBhgScore]
            },
            {
              name: "合格",
              textColor: "#FFFFFF",
              data: [res.data.numOfBoyHgScore, res.data.numOfHgScore - res.data.numOfBoyHgScore]
            },
            {
              name: "良好",
              textColor: "#FFFFFF",
              data: [res.data.numOfBoyLhScore, res.data.numOfLhScore - res.data.numOfBoyLhScore]
            },
            {
              name: "优秀",
              textColor: "#FFFFFF",
              data: [res.data.numOfBoyYxScore, res.data.numOfYxScore - res.data.numOfBoyYxScore]
            }
          ]
        };
        that.chartData3 = JSON.parse(JSON.stringify(res3));

        that.avgScoreChart = echarts.init(document.getElementById('avgScoreChart'));
        let option = {
          series: [
            {
              type: 'gauge',
              startAngle: 180,
              endAngle: 0,
              center: ['50%', '75%'],
              radius: '120%',
              min: 0,
              max: 40,
              splitNumber: 4,
              axisLine: {
                lineStyle: {
                  width: 6,
                  color: [
                    [0.25, '#FF6E76'],
                    [0.5, '#FDDD60'],
                    [0.75, '#58D9F9'],
                    [1, '#7CFFB2']
                  ]
                }
              },
              pointer: {
                icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                length: '12%',
                width: 20,
                offsetCenter: [0, '-60%'],
                itemStyle: {
                  color: 'inherit'
                }
              },
              axisTick: {
                length: 12,
                lineStyle: {
                  color: 'inherit',
                  width: 2
                }
              },
              splitLine: {
                length: 1,
                lineStyle: {
                  color: 'inherit',
                  width: 1
                }
              },
              axisLabel: {
                show:false,
              },
              title: {
                offsetCenter: [0, '-10%'],
                fontSize: 12
              },
              detail: {
                fontSize: 20,
                offsetCenter: [0, '-35%'],
                valueAnimation: true,
                formatter: function (value) {
                  return value + '分';
                },
                color: 'inherit'
              },
              data: [
                {
                  value: res.data.classAvgScore,
                  name: '平均分'
                }
              ]
            }
          ]
        };
        option && that.avgScoreChart.setOption(option);

        that.firstBoyStudent = res.data.firstBoyStudent;
        that.firstBoyStudentScore = res.data.firstBoyStudentScore;
        that.secondBoyStudent = res.data.secondBoyStudent;
        that.secondBoyStudentScore = res.data.secondBoyStudentScore;
        that.thirdBoyStudent = res.data.thirdBoyStudent;
        that.thirdBoyStudentScore = res.data.thirdBoyStudentScore;

        that.firstGirlStudent = res.data.firstGirlStudent;
        that.firstGirlStudentScore = res.data.firstGirlStudentScore;
        that.secondGirlStudent = res.data.secondGirlStudent;
        that.secondGirlStudentScore = res.data.secondGirlStudentScore;
        that.thirdGirlStudent = res.data.thirdGirlStudent;
        that.thirdGirlStudentScore = res.data.thirdGirlStudentScore;


        let subScoreList = res.data.subScoreList;
        let subNameList = [];
        let maxScoreList = [];
        let minScoreList = [];
        let avgScoreList = [];
        for(let i = 0;i<subScoreList.length;i++){
          subNameList.push(subScoreList[i].subName);
          maxScoreList.push(subScoreList[i].maxScore);
          minScoreList.push(subScoreList[i].minScore);
          avgScoreList.push(subScoreList[i].avgScore);
        }

        let res5 = {
          categories: subNameList,
          series: [
            {
              name: "最高分",
              linearColor: [
                [
                  0,
                  "#1890FF"
                ],
                [
                  0.25,
                  "#00B5FF"
                ],
                [
                  0.5,
                  "#00D1ED"
                ],
                [
                  0.75,
                  "#00E6BB"
                ],
                [
                  1,
                  "#90F489"
                ]
              ],
              setShadow: [
                3,
                8,
                10,
                "#1890FF"
              ],
              data: maxScoreList
            },
            {
              name: "平均分",
              data: avgScoreList
            },
            {
              name: "最低分",
              linearColor: [
                [
                  0,
                  "#FAC858"
                ],
                [
                  0.33,
                  "#FFC371"
                ],
                [
                  0.66,
                  "#FFC2B2"
                ],
                [
                  1,
                  "#FA7D8D"
                ]
              ],
              setShadow: [
                3,
                8,
                10,
                "#FC8452"
              ],
              data: minScoreList
            }
          ]
        };
        that.chartData5 = JSON.parse(JSON.stringify(res5));
      })

    },
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res4 = {
          categories: [{"value": 0.2, "color": "#1890ff"}, {"value": 0.8, "color": "#2fc25b"}, {
            "value": 1,
            "color": "#f04864"
          }],
          series: [
            {
              name: "完成率",
              data: 0.66
            }
          ]
        };
        this.chartData4 = JSON.parse(JSON.stringify(res4));
      }, 500);
    },

    changeYear() {
      let that = this;
      this.$http.post('/class/getClassByYear',{
        grade:new Date().getFullYear()+1- that.searchForm.year
      }).then(function (response) {
            that.classList = response.data;
          }).catch(function (error) {
            console.log(error);
          }
      );

    },
    search(){
      this.getChartData();
    },
    reset(){
      this.searchForm = {};
    },
  }
}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.charts-box {
  width: 100%;
  height: 300px;
}
.configContainer {
  margin: 10px 8px;
  padding: 0px;
  /* border: red 1px solid; */
}
</style>
